<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import modelMetrics from './all_models_metrics.json' // <-- 导入本地 JSON
import { fetchStats, fetchFraudTrend, fetchAgeDistribution } from '@/api/data'

const statsData = ref({})
const fraudChart = ref(null)
const agePieChart = ref(null)
const modelCompareChart = ref(null) // <-- 用来绑定“模型对比柱状图”的 DOM

onMounted(async () => {
  // 1. 获取一些基础统计
  const stats = await fetchStats()
  statsData.value = stats

  // 2. 绘制年龄分布饼图（保留原代码）
  const ageData = await fetchAgeDistribution()
  const agePieChartInstance = echarts.init(agePieChart.value)
  agePieChartInstance.setOption({
    title: { text: '年龄区间分布', left: 'center' },
    tooltip: { trigger: 'item' },
    series: [{ name: '年龄分布', type: 'pie', radius: '50%', data: ageData }]
  })

  // 3. 绘制“模型对比”柱状图
  // 提取模型名称
  const modelNames = Object.keys(modelMetrics) // ["decisiontree", "knn", "logisticregression", ...]

  // 准备各指标数据
  const accuracyData = modelNames.map(name => modelMetrics[name].accuracy)
  const f1Data = modelNames.map(name => modelMetrics[name].f1)
  const precisionData = modelNames.map(name => modelMetrics[name].precision)
  const recallData = modelNames.map(name => modelMetrics[name].recall)

  // 初始化图表实例
  const modelChartInstance = echarts.init(modelCompareChart.value)
  modelChartInstance.setOption({
    title: { text: '模型指标对比' },
    tooltip: { trigger: 'axis' },   // 鼠标悬浮提示
    legend: { data: ['准确率', 'F1分数', '精度', '召回率'] ,
      textStyle: {
        fontSize: 28
      }},
    xAxis: {
      type: 'category',
      data: modelNames,
      axisLabel: {
        fontSize: 20
      }
    },
    yAxis: {
      type: 'value',
      min:'dataMin',
      axisLabel: {
        fontSize: 20
      }
    },
    series: [
      { name: '准确率', type: 'bar', data: accuracyData },
      { name: 'F1分数', type: 'bar', data: f1Data },
      { name: '精度', type: 'bar', data: precisionData },
      { name: '召回率', type: 'bar', data: recallData }
    ]
  })
})
</script>



<template>
  <div>
    <!-- 格子图部分 -->
    <div class="grid-container">
      <div class="grid-item">
        <h3>用户数量</h3>
        <p>{{ statsData.userCount }}</p>
      </div>
      <div class="grid-item">
        <h3>欺诈金额</h3>
        <p>{{ statsData.fraudAmount }}</p>
      </div>
      <div class="grid-item">
        <h3>欺诈数量</h3>
        <p>{{ statsData.fraudCount }}</p>
      </div>
      <div class="grid-item">
        <h3>交易数量</h3>
        <p>{{ statsData.transactionCount }}</p>
      </div>
      <div class="grid-item">
        <h3>交易金额</h3>
        <p>{{ statsData.transactionAmount }}</p>
      </div>
    </div>

<!--    &lt;!&ndash; 曲线图部分 &ndash;&gt;-->
<!--    <div ref="fraudChart" style="width: 100%; height: 400px; margin-top: 20px;"></div>-->

    <!-- 饼状图部分 -->
    <div ref="agePieChart" style="width: 100%; height: 400px; margin-top: 20px;"></div>
    <div ref="modelCompareChart" style="width: 100%; height: 400px; margin-top: 20px;"></div>
  </div>
</template>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
}

h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

p {
  margin: 10px 0 0;
  font-size: 24px;
  color: #666;
}
</style>
